<template>
	<view class="u-p-30">
		<view class="loginbox u-p-20">
			<view>手机号码</view>
			<view class="u-m-t-10">
				<u-input v-model="mobile" maxlength="11" type="text" placeholder="请输入手机号码" :border="false" />
			</view>
		</view>
		<view class="loginbox u-p-20 u-m-t-30">
			<view>密码</view>
			<view class="u-m-t-10">
				<u-input v-model="password" type="password" placeholder="请输入密码" :border="false" />
			</view>
		</view>
		<view class="loginbox u-p-20 u-m-t-30">
			<view>验证码</view>
			<view class="u-m-t-10 u-flex">
				<u-input class="u-flex-1" v-model="code"  placeholder="请输入验证码" :border="false" />
				<u-button type="warning" size="mini" shape="circle" :disabled="verify_is_click" @click="getCode">{{verify_text}}</u-button>
			</view>
		</view>
		<view class="u-m-t-30">
			<u-checkbox-group>
				<u-checkbox v-model="checked" shape="circle" active-color="#FF9832" size="30" label-size="26">
					<text>我已阅读并接受</text>
					<text class="fontColor" @click.stop="toUrl('user')">《用户使用协议》</text>
					<text class="fontColor" @click.stop="toUrl('privacy')">《隐私协议》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	
		<view class="u-m-t-60">
			<u-button type="warning" @click="onSubmit">注册</u-button>
		</view>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				referrerMobile: '', // 邀请码
				code: '',
				checked: false,
				
				isLogin: false,
				verify_text: '发送验证码',
			    verify_is_click: false,
			    verify_second: 10,
				REG_MOBILE: /^(((13[0-9]{1})|(15[0-9]{1})|(14[0-9]{1})|(16[0-9]{1})|(92[0-9]{1})|(98[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(17[0-9]{1}))+\d{8})$/,
				otherParams: {}
			}
		},
		methods: {
			onSubmit() {
			  if (!this.mobile) {
				this.$u.toast('请输入手机号');
				return
			  }
			  if (!this.REG_MOBILE.test(this.mobile)) {
				  this.$u.toast('手机号不合法');
				return
			  }
			  
			  if (!this.password) {
				  this.$u.toast('请输入密码');
				return
			  }
			  if (!this.code) {
				  this.$u.toast('请输入手机验证码');
				return
			  }
			  if(!this.checked) {
				  this.$u.toast('请先同意用户协议和隐私协议');
			  }
			  let params = {
				code: this.code,
				mobile: this.mobile,
				password:  md5Libs.md5(this.password),
				referrerMobile: uni.getStorageSync('referrerMobile') || ''
			  }
			  if (this.otherParams && Object.keys(this.otherParams).length !== 0) {
				params = {...params, ...this.otherParams}
			  }
			  this.$u.api.register(params).then(res => {
				if (res.code == 0) {
					this.$u.toast('注册成功');
				} else {
					this.$u.toast('注册失败,' + res.msg);
				}
			  })
			},
			getCode() {
			  if (!this.mobile) {
				this.$u.toast('请输入手机号');
				return
			  }
			  if (!this.REG_MOBILE.test(this.mobile)) {
				  this.$u.toast('手机号不合法');
				return
			  }
		
			  this.verify_is_click = true;
			  const verify = () => {
				let second = this.verify_second
				let verify_text = ""
				this.codeTimer = setInterval(() => {
				  second--
				  verify_text = `${second}s后重新获取`
				  if (second === 0) {
					clearInterval(this.codeTimer)
					this.verify_is_click = false;
					verify_text = '获取验证码'
				  }
				  this.verify_text = verify_text;
				}, 1000)
			  }
			 //  this.$toast.loading({
				// message: '加载中...',
				// forbidClick: true,
				// duration: 0,
			 //  });
			  this.$u.api.smsSend({
				  mobile: this.mobile,
				  type: 'register'
			  }).then(res => {
				// this.$toast.clear();
				if (res.code == 0) {
				  verify()
				  this.$u.toast('验证码获取成功');
				} else {
				  this.verify_is_click = false;
				  this.$u.toast('请重新获取验证码');
				}
			  })
			},
			toUrl(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				})
			},
		},
	}
</script>


<style scoped lang="scss">
	.loginbox {
		border-radius: 10rpx;
		border-bottom: 1px solid $u-border-color;
	}

	.fontColor {
		color: $u-link-color;
	}
</style>
